import { utils, Toast } from '@casstime/bricks';
import { IOption } from '@casstime/bricks/dist/src/components/select/DropdownList';
import { action, observable, runInAction } from 'mobx';
import moment, { Moment } from 'moment';

import {
  getAreaList,
  getCategoryList,
  getProductDetail,
  getQualityList,
  saveProductInfo
} from '../api';

import { IProductDetail } from '../interfaces/IProductDetail';

export interface IChainSelectOption extends IOption {
  children?: IChainSelectOption[];
}

class ProductUpdateStore {
  /** 商品id */
  @observable productId: string = '';

  /** 商品详情 */
  @observable productDetail: IProductDetail = {
    productId: '',
    productQuality: { label: '', value: '' }
  };

  /** 品质列表 */
  @observable qualityList: IOption[] = [];

  /** 地址列表 */
  @observable areaList: IChainSelectOption[] = [];

  /** 品类列表 */
  @observable categoryList: utils.ITree[] = [];

  /** 是否显示品类弹窗 */
  @observable showCategoryModal: boolean = false;

  originCategoryList: utils.ITree[] = [];

  /***
   * 单独存商品id,为其他操作使用方便
   * @param data 查询条件
   */
  @action
  saveProductId(productId: string) {
    this.productId = productId;
  }

  /***
   * 修改商品名称
   * @param e 修改商品名称的input的change事件
   */
  @action
  changeProductName(e: React.ChangeEvent<HTMLInputElement>) {
    runInAction(() => {
      this.productDetail = {
        ...this.productDetail,
        productName: e.target.value
      };
    });
  }

  /***
   * 修改商品类型
   * @param e 修改商品类型的radio的change事件
   */
  @action
  changeProductType(e: React.ChangeEvent<HTMLInputElement>) {
    runInAction(() => {
      this.productDetail = {
        ...this.productDetail,
        productType: e.target.value
      };
    });
  }

  /***
   * 修改商品品质
   * @param option 修改商品品质的值
   */
  @action
  changeProductQuality(option: IOption) {
    runInAction(() => {
      this.productDetail = {
        ...this.productDetail,
        productQuality: option
      };
    });
  }

  /***
   * 修改商品品质
   * @param value 修改的时间
   * @param field 修改的字段key
   */
  @action
  changeProductDate(value: Moment, field: 'startTimeMoment' | 'endDateMoment') {
    runInAction(() => {
      this.productDetail = {
        ...this.productDetail,
        [field]: value
      };
    });
  }

  /***
   * 修改商品描述, 假设限制最多200个字
   * @param e 商品描述textarea change事件
   */
  @action
  changeProductDetail(e: React.ChangeEvent<HTMLTextAreaElement>) {
    runInAction(() => {
      this.productDetail = {
        ...this.productDetail,
        productDesc: e.target.value.slice(0, 200)
      };
    });
  }

  /***
   * 修改商家地址
   * @param value 修改的商家地址
   */
  @action
  changeMerchantAddress(value: IChainSelectOption[]) {
    runInAction(() => {
      this.productDetail = {
        ...this.productDetail,
        merchantAddress: value
      };
    });
  }

  /***
   * 修改商品品类
   * @param value 修改的商品品类
   */
  @action
  changeCategoryData(value: utils.ITree[]) {
    runInAction(() => {
      this.categoryList = this.originCategoryList;
      this.productDetail = {
        ...this.productDetail,
        productCategory: value
      };
    });
  }

  /***
   * 切换品类选择弹窗
   * @param flag 是否显示弹窗
   */
  @action
  toggleCategotyModal = (flag: boolean) => {
    runInAction(() => {
      this.showCategoryModal = flag;
    });
  };

  /***
   * 获取商品详情
   * @param productId 商品id
   */
  @action
  async getProductDetail(productId: string) {
    this.saveProductId(productId);
    const data = await getProductDetail({ productId });
    const productDetail = {
      ...data,
      productQuality: {
        value: data.productQualityType || '',
        label: data.productQualityName || ''
      },
      startTimeMoment: moment(data.startTime),
      endDateMoment: moment(data.endTime)
    };
    runInAction(() => {
      this.productDetail = productDetail;
    });
  }

  /***
   * 获取品质列表
   */
  @action
  async getQualityList() {
    const qualityList = await getQualityList();
    runInAction(() => {
      this.qualityList = qualityList;
    });
    if (!this.productDetail.productQuality && qualityList.length) {
      runInAction(() => {
        this.productDetail = {
          ...this.productDetail,
          productQuality: qualityList[0]
        };
      });
    }
  }

  /***
   * 获取商家地址
   */
  @action
  async getAreaList() {
    const areaList = await getAreaList();
    runInAction(() => {
      this.areaList = areaList;
    });
  }

  /***
   * 获取品类列表
   */
  @action
  async getCategoryList() {
    const categoryList = await getCategoryList();
    runInAction(() => {
      this.categoryList = [...categoryList];
    });
    this.originCategoryList = [...categoryList];
  }

  /***
   * 校验商品信息填写
   * @param data 填写的商品详情数据
   */
  validRequiredValues(data: IProductDetail) {
    type IProductDetailKey = keyof IProductDetail;
    const requiredKeys: IProductDetailKey[] = [
      'productName',
      'productType',
      'productDesc',
      'startTime',
      'endTime',
      'productQualityType',
      'productQualityName'
    ];
    return requiredKeys.every(v => {
      if (!data[v]) {
        Toast.error('请完善商品信息~', 2000);
      }
      return !!data[v];
    });
  }

  /***
   * 获取商品详情
   */
  @action
  saveProductInfo = () => {
    const { productDetail } = this;
    const { productQuality } = productDetail;
    const data = {
      ...productDetail,
      productId: this.productId,
      startTime:
        productDetail.startTimeMoment &&
        productDetail.startTimeMoment.format('YYYY-MM-DD'),
      endTime:
        productDetail.endDateMoment &&
        productDetail.endDateMoment.format('YYYY-MM-DD'),
      productQualityType: productQuality ? productQuality.value : '',
      productQualityName: productQuality ? productQuality.label : ''
    };
    /** 校验商品信息填写是否完整 */
    if (this.validRequiredValues(data)) {
      saveProductInfo(data);
    }
  };
}

export default ProductUpdateStore;
